<template>
  <div>
    <div class="textContent">
      <textarea name id cols="30" rows="10" placeholder="请输入内容" v-model="bcText"></textarea>
    </div>
    <div class="adjust">
      <div>
        语速:
        <choice :options="speech" @change="change" />
      </div>
    </div>
  </div>
</template>
<script>
import choice from "./choice";
export default {
  components: {
    choice
  },
  data() {
    return {
      speech: [],
      // volume: [],
      bcText: "",
      voiceSpeed: 0
    };
  },
  watch: {
    bcText() {
      this.$emit("textPlay", {
        voiceSpeed: this.voiceSpeed,
        bcText: this.bcText
      });
    },
    voiceSpeed() {
      this.$emit("textPlay", {
        voiceSpeed: this.voiceSpeed,
        bcText: this.bcText
      });
    }
  },
  methods: {
    change(e) {
      this.voiceSpeed = e;
    },
    setUp() {}
  },
  mounted() {
    for (var i = -10; i <= 10; i++) {
      this.speech.push({
        name: i,
        value: i
      });
    }
    // for (var i = 0; i <= 100; i++) {
    //   this.volume.push({
    //     name: i,
    //     value: i
    //   });
    // }
  }
};
</script>
<style scoped>
.textContent {
  display: flex;
  justify-content: center;
}
textarea {
  width: 270px;
  margin-top: 30px;
  padding: 10px;
  background: rgba(0, 0, 0, 0);
  color: #fff;
  resize: none;
  outline: none;

  border: 1px solid #fff;
}
.adjust {
  display: flex;
  margin-top: 30px;
  justify-content: space-around;
}
.block {
  text-align: center;
  padding-top: 30px;
}
.block .el-button {
  width: 100%;
  background-color: #00968e;
  color: #fff;
}
</style>